<template>
  <div class="dashboard-editor-container">
    <el-card>
      <el-form :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6">
            <el-form-item label="任务开始日期" prop="startDate">
              <el-date-picker
                size="mini"
                style="width:100%;"
                v-model="form.TASKBEGINDATE"
                type="date"
                value-format="yyyyMMdd"
                placeholder="任务开始日期"
                :picker-options="pickerOptionsStart"
                @change="changeStart"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="任务结束日期" prop="endDate">
              <el-date-picker
                style="width:100%;"
                size="mini"
                v-model="form.TASKENDDATE"
                type="date"
                value-format="yyyyMMdd"
                placeholder="任务结束日期"
                :picker-options="pickerOptionsEnd"
                @change="changeEnd"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :lg="6" :md="9" class="searchBtnMarginTop">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-search"
              @click="StudyQuery('form')"
            >查询</el-button>
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-refresh"
              @click="resetForm('form')"
            >重置</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
          <el-col :lg="2" :md="3" style="margin-right: 25px;">
            <el-button type="success" size="mini" icon="el-icon-download" @click="downloadTemplate">导出报表</el-button>
          </el-col>
        </el-row>
      <el-row>
        <el-col>
          <el-table
            :data="tableData"
            class="tableMarginTop"
            border
            highlight-current-row
            ref="tableData"
          >
            <el-table-column prop="CASENAME" label="案例名称" align="center"></el-table-column>
            <el-table-column prop="TASKBEGINDATE" label="任务开始日期" width="100" align="center"></el-table-column>
            <el-table-column prop="TASKENDDATE" label="任务结束日期" align="center"></el-table-column>
            <el-table-column prop="TOTAL" label="总人数" width="100" align="center"></el-table-column>
            <el-table-column prop="NOTSTUDY" label="未学习人数" width="100" align="center"></el-table-column>
            <el-table-column prop="STUDYED" label="已学习人数" width="100" align="center"></el-table-column>
            <el-table-column prop="STUDYING" label="学习中人数" width="100" align="center"></el-table-column>
          </el-table>
          <div style="text-align:right;margin-top:20px;" v-show="this.tableData">
            <el-pagination
              :current-page="currentPage"
              background
              @size-change="handleSizeChange"
              :page-sizes="[10,25,50,100]"
              :page-size="pageSize"
              layout="total,sizes, prev, pager, next, jumper"
              :total="tableTotal"
              @current-change="changePage"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import toolBox from "@/common/utils/toolBox";
import selectTree from "@/components/selectTree5/";
import getGlobalParams from "@/common/utils/getGlobalParams";
import queyData from "@/message/QCManage/caseManage/studySituationQuery";
import exportData from "@/message/QCManage/caseManage/studySituationExport";
import request from "@/common/utils/requestQC";

export default {
  created() {
    this.form.TASKBEGINDATE = toolBox.getCurrentMonthFirstDay();
    this.changeStart();
    this.form.TASKENDDATE = toolBox.getCurrentMonthLastDay();
    this.changeEnd();
  },
  mounted() {
    this.StudyQuery();
  },
  data() {
    return {
      pickerOptionsStart: {
        disabledDate: time => {
          // return time.getTime() < Date.now()
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          // return time.getTime() < Date.now()
        }
      },
      tableTotal: 0,
      pageSize: getGlobalParams.get("PageSize"),
      currentPage: 1, //表格当前页
      tableData: [],
      fileUrl: getGlobalParams.get("FileDownloadAddress"),
      form: {
        TASKBEGINDATE: "",
        TASKENDDATE: ""
      }
    };
  },
  methods: {
    async StudyQuery() {
      let resBody = new queyData();
      resBody.data.TASKBEGINDATE = this.form.TASKBEGINDATE;
      resBody.data.TASKENDDATE = this.form.TASKENDDATE;
      let response = await request(resBody);
      if (response.SYS_HEAD.ReturnCode == "000000") {
        console.log("table" + JSON.stringify(response.BODY.RSPSTRUCT));
        this.tableData = response.BODY.RSPSTRUCT;
        this.tableTotal = this.tableData.length;
      } else {
        this.$message({
          type: "error",
          message:
            "请求失败，错误码:" +
            response.SYS_HEAD.ReturnCode +
            "，错误信息：" +
            response.SYS_HEAD.ReturnMessage
        });
      }
    },
    changeStart() {
      this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
        disabledDate: time => {
          if (this.form.TASKBEGINDATE) {
            return (
              time.getTime() <
              Date.parse(
                this.form.TASKBEGINDATE.slice(0, 4) +
                  "-" +
                  this.form.TASKBEGINDATE.slice(4, 6) +
                  "-" +
                  this.form.TASKBEGINDATE.slice(6, 8)
              ) -
                8.64e7
            );
          } else {
            // return time.getTime() < Date.now();
          }
        }
      });
    },
    changeEnd() {
      this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
        disabledDate: time => {
          if (this.form.TASKENDDATE) {
            return (
              time.getTime() >
              Date.parse(
                this.form.TASKENDDATE.slice(0, 4) +
                  "-" +
                  this.form.TASKENDDATE.slice(4, 6) +
                  "-" +
                  this.form.TASKENDDATE.slice(6, 8)
              )
            );
          } else {
            // return time.getTime() < Date.now();
          }
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    changePage(val) {
      this.currentPage = val;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 导出报表
      async downloadTemplate() {
        let resBody = new exportData(); 
        resBody.data.TASKBEGINDATE = this.form.TASKBEGINDATE;
        resBody.data.TASKENDDATE = this.form.TASKENDDATE;
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          let res = response.BODY
          let name = res.FILENAME
          let url = res.FILEURL
        //   console.log(this.fileUrl)
        //   console.log(JSON.stringify(response.BODY))
        //   console.log(decodeURIComponent(this.fileUrl +  url  + name))
        //   console.log(encodeURIComponent(this.fileUrl +  url  + name))
        //   this.downloadFile(this.fileUrl + url + '/' + name)
          this.downloadFile(this.fileUrl + url +  name)
          console.log(this.fileUrl + url +  name)
          
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>